import React, { PureComponent, Fragment } from 'react';
import { connect, routerRedux } from 'dva';
import { RightOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Row, Col, Spin, Modal, message } from 'antd';
import { commonFnMenu, IconMenu } from '../../IconConfig/IconConfig';
import NoData from '../InfoWarn/component/NoData';
import cygn from '../../../../assets/busi/OperatePlatform/funct_title_bg.jpg';
import style from './index.less';
import MyModal from './showModalNew';
@connect(({ OperatePlatformM, loading }) => ({ OperatePlatformM, loading: loading.effects[`OperatePlatformM/queryCuFunctionsByCreator`] }))
@Form.create()
export default class NewCommonFunc extends PureComponent {
  constructor(props) {
    super(props);
    this.state = {
      isShow: false, // 设置常用功能modal展示与隐藏
      isRendering: false, // loading加载状态
    };
  }

  componentDidMount() {
    const { dispatch } = this.props;
    const userId = localStorage.getItem('antd-pro-userId');
    dispatch({
      //获取默认展示的功能
      type: 'OperatePlatformM/queryCuFunctionsByCreator',
      payload: {},
    });
  }

  // 点击图标跳转页面
  clickUrl = (text) => {
    const { dispatch } = this.props;
    IconMenu.map((item, index) => {
      if (item.title == text) {
        dispatch(routerRedux.push(item.route));
      }
    });
  };

  // 点击更多
  clickMore = () => {
    this.setState({
      isShow: true,
    });
  };

  // 常用功能单个功能样式
  oneContent = (text) => {
    let iconImg = IconMenu.filter((item, index) => item.title == text);
    return (
      <div onClick={() => {}} className={style.oneContent}>
        <div onClick={() => this.clickUrl(text)} style={{ cursor: 'pointer' }} className={style.oneContentItem}>
          <div>
            <img alt={text} src={iconImg.length ? iconImg[0].icon : ''} style={{ height: '60px', width: '60px' }} />
          </div>
          <div style={{ textAlign: 'center' }}>
            <span>{text}</span>
          </div>
        </div>
      </div>
    );
  };

  // 组件组要内容
  showContent = () => {
    const {
      OperatePlatformM: { controlCurrent },
    } = this.props;
    const { loading } = this.props;
    //组合日历、现金流预测、限额监控、持仓查询、现金管理理财新规报告功能
    return (
      <div className={style.mainContent}>
        {loading ? (
          <div className={style.mainContentSpin}>
            <Spin></Spin>
          </div>
        ) : //需要是对象
        controlCurrent && controlCurrent.myApp && controlCurrent.myApp.length ? (
          <div className={style.mainContent_child}>
            {controlCurrent?.myApp.map((item, index) => {
              return <div className={style.child}>{this.oneContent(item.name)}</div>;
            })}
          </div>
        ) : (
          <NoData title='您还未设置常用功能，请点击更多进行设置!' width='104px' />
        )}
      </div>
    );
  };

  // 点击更多展示modal框
  showModal = () => {
    const that = this;
    const { isShow } = this.state;
    const userId = localStorage.getItem('antd-pro-userId');
    const { dispatch } = this.props;
    const props = {
      visible: isShow,
      maskClosable: false,
      title: '常用功能',
      width: 960,
      okText: '保存',
      onOk() {
        that.setState(
          {
            isRendering: true,
          },
          () => {
            const obj = that.child;
            dispatch({
              type: 'OperatePlatformM/updateOrAddCuFunctions',
              payload: obj.state.myApply,
            }).then((res) => {
              if (res.code == 0) {
                dispatch({
                  //获取默认展示的功能
                  type: 'OperatePlatformM/queryCuFunctionsByCreator',
                  payload: {},
                });
                that.setState({
                  isShow: false,
                });
              } else {
                message.error('更新常用功能失败!');
                return;
              }
            });
          },
        );
      },
      onCancel() {
        that.setState({
          isShow: false,
        });
      },
    };
    return (
      <div>
        {isShow ? (
          <Modal {...props} className={style.modalcommon}>
            <MyModal onRef={(ref) => (this.child = ref)} />
          </Modal>
        ) : null}
      </div>
    );
  };

  render() {
    return (
      <div className={style.newCommon}>
        <div className={style.headerContent} style={{ backgroundImage: `url(${cygn})` }}>
          <Row gutter={8}>
            <Col span={12}>
              <span className={style.text_title}>常用功能</span>
            </Col>
            <Col className={style.row_2} span={12}>
              <a onClick={() => this.clickMore()}>
                更多
                <RightOutlined />
              </a>
            </Col>
          </Row>
        </div>
        <div>{this.showContent()}</div>
        {this.showModal()}
      </div>
    );
  }
}
